<template>
  <div id="role">
        <div>
            <el-card class="box-card">
                <el-row>
                    <el-col :span="8"> 
                        <el-input
                        placeholder="请输入角色名称"
                        v-model="roleName"
                        clearable>
                        </el-input>
                    </el-col>
                    <el-col :span="2" :offset="1"><el-button icon="el-icon-search" @click="getRoleByPage" circle></el-button></el-col>
                    <el-col :span="2"><el-button type="primary" @click="addRole" round>新增</el-button></el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-table
                            :data="productData"
                            border
                            style="width:100%">
                            <el-table-column
                            fixed
                            prop="id"
                            label="序号"
                            >
                            </el-table-column>
                            <el-table-column
                            prop="roleName"
                            label="角色名称"
                            >
                            </el-table-column>
                            <el-table-column
                            prop="createTime"
                            label="创建时间"
                            >
                            </el-table-column>
                            <el-table-column
                            fixed="right"
                            label="操作"
                            width="200">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small" >查看</el-button>
                                <el-button @click="handleUpdate(scope.row)" type="text" size="small">编辑</el-button>
                                <el-button @click="jurisdiction(scope.row)" type="text" size="small" >权限</el-button>
                                <el-button @click="deleteRole(scope.row)" type="text" size="small" style="color: red;">删除</el-button>
                            </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
                <el-row style="text-align: center;">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total">
                    </el-pagination>          
                </el-row>
            </el-card>
            <!-- 数据新增功能 -->
            <el-dialog title="新增角色" :visible.sync="dialogFormVisible">
                <el-form :model="productForm">
                    <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="productForm.roleName" autocomplete="off" ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveRole">确 定</el-button>
                </div>
            </el-dialog>
            <!-- 数据查看功能 -->
            <el-dialog title="查看详情" :visible.sync="dialogFormVisibleDatil">
                <el-form :model="productFormList">
                    <el-form-item label="角色名称" :label-width="formLabelWidth">
                        <el-input v-model="productFormList.roleName" autocomplete="off"  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" :label-width="formLabelWidth">
                        <el-input v-model="productFormList.createTime" autocomplete="off"  :disabled="true"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleDatil = false">关闭</el-button>
                </div>
            </el-dialog>
            <!-- 数据授权功能 -->
            <el-dialog title="权限授权" :visible.sync="dialogFormjurisdiction" append-to-body>
                <el-tree
                    :data="data"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    :default-checked-keys="productFormEdit.aa"
                    ref="tree"
                    highlight-current
                    :props="defaultProps">
                </el-tree>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="getCheckedKeys">确 定</el-button>
                    <el-button @click="dialogFormjurisdiction = false">关闭</el-button>
                </div>
            </el-dialog>
            <!-- 数据修改功能 -->
            <el-dialog title="角色编辑" :visible.sync="dialogFormVisibleUpdate">
                <el-form :model="productFormEdit">
                    <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="productFormEdit.roleName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
                    <el-button type="primary" @click="updateRole">确 定</el-button>
                </div>
            </el-dialog>
        </div>
  </div>
  
</template>

<script>
const axios = require('axios');
export default {
   name: 'role',
        data(){
            return {
                jurisdiction1:"",//存放授权选中的菜单id
                roleName:"",//存放模糊查输入框输入的值
                productData: [],//分页全查存放的数组
                dialogFormVisible: false,//新增弹框true弹出
                dialogFormVisibleDatil:false,//查看弹框true弹出
                dialogFormVisibleUpdate:false,//修改弹框true弹出
                dialogFormjurisdiction:false,//权限弹框true弹出
                productForm: {// 新增时使用到的form对象
                    id:"",
                    roleName:""

                },
                roleForm: {// 新增时使用到的form对象
                    id:"",
                    roleName:"",
                    founder:"",
                    remarks:"",
                    sortNum:"",
                },
                productFormList:{//查看时使用到的form对象
                    id:"",
                    roleName:"",
                    createTime:"",
                },
                productFormEdit:{// 修改时使用到的form对象
                    id:"",
                    roleName:"",
                    jurisdiction:"",
                    aa:[]
                },
                formLabelWidth: '120px',
                currentPage4: 1,//分页当前选中页
                page:{
                    pageSize:10,//条数
                    pageNum:1,//页数
                    total:0
                },
                tatal:0,
                data: [],//存放查询遍历后的菜单
                defaultProps: {
                    children: 'childs',
                    label: 'menuName'
                },
            }
        },
        methods:{
            //查询所有菜单
            getMenuTree(){
                axios.get("http://127.0.0.1:8082/menu/getMenuTree").then(res=>{
                    this.data=res.data.obj
                }).catch(error => {
                            this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                    })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            // 分页
            handleSizeChange(ps) {
                this.page.pageSize=ps;
                this.getRoleByPage()
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(pn) {
                this.page.pageNum=pn;
                this.getRoleByPage()
            },
            //角色分页查+模糊查（角色名称）
            getRoleByPage () {
                axios.get('http://127.0.0.1:8082/role/roleAllList', {
                    params: {
                        roleName: this.roleName,
                        pageSize: this.page.pageSize,
                        pageNum: this.page.pageNum
                    }
                })
                    .then((res) => {
                        this.productData = res.data.content
                        this.page.total = res.data.total
                    })
            },
            //角色授权
            getCheckedKeys(){
                var jurisdiction1=this.$refs.tree.getCheckedKeys().join(",")+','+this.$refs.tree.getHalfCheckedKeys()
                this.productFormEdit.jurisdiction=jurisdiction1
                axios.put("http://127.0.0.1:8082/role/saveJurisdiction",this.productFormEdit)
                    .then(res=>{
                        if(res.data.code="200"){
                            this.message("恭喜你，添加权限成功！","success")
                            this.dialogFormjurisdiction = false
                            this.productFormEdit={
                                aa:''
                            }
                            this.getRoleByPage();
                        }else{
                            this.message("对不起，添加权限失败！","warning")
                        }
                    }).catch(error => {
                        this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                    })
            },
            //新增用户
            saveRole(){ 
                var formdata = new FormData();
                formdata.set("roleName",this.productForm.roleName)
                axios.post("http://127.0.0.1:8082/role/saveRole",formdata).
                then(res => {
                    if(res.data.obj>0){
                        this.message("恭喜你，保存数据成功！","success")
                        this.dialogFormVisible = false
                        this.productForm={
                            roleName:""
                        }
                        this.getRoleByPage()
                    }else{
                        this.message("对不起，保存失败！","warning")
                    }
                }).catch(error => {
                    this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                })
            },
            //修改角色
            updateRole(){
                var formdata = new FormData();
                formdata.set("id",this.productFormEdit.id)
                formdata.set("roleName",this.productFormEdit.roleName)
                axios.put("http://127.0.0.1:8082/role/updateRole",formdata)
                .then(res=>{
                    if(res.data.code==='200'){
                    this.message("恭喜你，修改数据成功！","success")
                            this.dialogFormVisibleUpdate = false
                            this.productFormEdit={
                            roleName:""
                            }
                            this.getRoleByPage();// 重新渲染数据列表
                    }else{
                            this.message("对不起，修改失败！","warning")
                        }
                    }).catch(error => {
                        this.$message.error('服务器崩溃了，请稍后再尝试使用！');
                })
            },
            //删除角色
            deleteRole(row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }//删除提示框
                ).then(() => {
                    axios.delete("http://127.0.0.1:8082/role/deleteRole?id="+row.id)
                .then(res =>{
                    if(res.data.code==='200' ){
                        this.message("恭喜你，删除成功！","success")
                        this.getRoleByPage()
                    }else{
                        this.message('删除失败','warning')
                    }
                }).catch(error =>{
                        alert(error)
                })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            },
            //消息提示框
            message(message,type){
                this.$message({
                    message:message,
                    type: type
                });
            },
            //查看按钮回显值
            handleClick(row){
                this.dialogFormVisibleDatil = true
                this.productFormList.roleName=row.roleName
                this.productFormList.createTime=row.createTime
            },
            //修改按钮回显值
            handleUpdate(row){
                this.dialogFormVisibleUpdate=true
                this.productFormEdit.id = row.id
                this.productFormEdit.roleName=row.roleName
            },
            //新增按钮弹出弹框
            addRole(){
                this.dialogFormVisible = true
            },
            //角色授权
            jurisdiction(row){
                this.dialogFormjurisdiction = true
                this.productFormEdit.id = row.id
                this.productFormEdit.roleName=row.roleName
                this.productFormEdit.jurisdiction=row.jurisdiction
                this.productFormEdit.aa=this.productFormEdit.jurisdiction.split(',') 
                this.getMenuTree()
            },
        },
        //初始化加载数据
        mounted(){
            this.getRoleByPage()//分页全查
            this.getMenuTree()//菜单全查
            }, 
}
</script>
<style>
/**
* 附件上传样式
*/
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.box-card {
    height: 100%;
}
</style>